<template>
  <div>
    <!-- 发帖结束 -->
    <!-- 新增开始 -->
    <div class="post_new_counts" style="display: none">
      <div>显示 45 帖子</div>
    </div>
    <!-- 新增结束 -->
    <!-- 关注内容开始 -->

    <div class="infinite-list-panel" v-loading="loading">
      <div class="infinite-list">
        <div v-if="YouFoData.YouFoList.length > 0">
          <div v-for="(item, index) in YouFoData.YouFoList" :key="index">
            <PostList
              @reloadDataList="loadYouFoData"
              :postData="item"
              :key="Math.random() * 100"
            />
          </div>

          <p class="loading" v-if="YouFoData.loading">
            {{ $t("postlist.loading") }}
          </p>
          <p class="addload" v-if="!noMoreFoData" @click="addYouFoPostData">
            {{ $t("postlist.clickaddmore") }}
          </p>
          <p class="nomore" v-if="noMoreFoData">{{ $t("postlist.nomore") }}</p>
        </div>
        <div v-else>
          <div class="NoData">{{ $t("postlist.nofollowing") }}</div>
        </div>
      </div>
    </div>

    <!-- 关注内容结束 -->
  </div>
</template>
<script>
import PostList from "@/components/PostList.vue";

//获取统一请求接口
import { getCurrentUserFoUserPostDataList } from "@/api";

export default {
  name: "MainNewPostListComponents",
  components: {
    PostList,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      YouFoData: {
        currentPage: 1, //起始页数值为1
        loading: false,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        YouFoList: [], //关注贴文列表
        current_user_id: JSON.parse(localStorage.getItem("user")).user_id
          ? JSON.parse(localStorage.getItem("user")).user_id
          : 1,
      },
      loading: true,
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.ForYouData.currentPage >= this.ForYouData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
    noMoreFoData() {
      //当起始页数大于总页数时停止加载
      return this.YouFoData.currentPage >= this.YouFoData.pageTotal;
    },
    addMoreFoData() {
      return !this.noMoreFoData();
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    //获取当前用户关注者的发帖数据
    loadYouFoData() {
      //滑到底部时进行加载
      this.loading = true;
      this.YouFoData.loading = true;
      setTimeout(() => {
        this.getYouFoPostData(); //调用接口，此时页数+1，查询下一页数据
      }, 100);
    },
    //发帖组件触发刷新
    initData() {
      this.loadYouFoData();
    },
    //初始化正在关注的人的帖子列表
    async getYouFoPostData() {
      let res = await getCurrentUserFoUserPostDataList(
        this.YouFoData
      );
      if (res.state == 200) {
        this.YouFoData.YouFoList = res.data.data;
        this.YouFoData.pageTotal = res.data.pageTotal;
        this.YouFoData.loading = false;
        this.loading = false;
      } else {
        this.YouFoData.loading = false;
        this.loading = false;
      }
    },
    //分页累加
    async addYouFoPostData() {
      this.YouFoData.currentPage += 1; //页数+1
      let res = await getCurrentUserFoUserPostDataList(
        this.YouFoData
      );
      if (res.state == 200) {
        //存放数据的列表累加
        this.YouFoData.YouFoList = this.YouFoData.YouFoList.concat(
          res.data.data
        );
        this.YouFoData.pageTotal = res.data.pageTotal;
        this.YouFoData.loading = false;
      }
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
/* 备注：应用下拉加载的外层容器必须设置固定高度，否则会自动无限加载 */
.infinite-list-panel {
  overflow: hidden;
}

.infinite-list {
  overflow: auto;
  /* height: 100vh; */
}

.infinite-list-panel .addload {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgb(29, 155, 240);
  font-weight: 700;
}

.infinite-list-panel .loading,
.infinite-list-panel .nomore {
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}
</style>